<template>
  <div class='container' :style="{transform: 'rotateY(' + degValue + 'deg)'}">
    <div class='front'>
      <div class='increment'>
        <MyIncrement />
      </div>
      <div class='show-front'> {{ fontCount }}</div>
      <div class='decrement'>
        <MyDecrease />
      </div>
    </div>

    <div class='back'>
      <div class='increment'>
        <MyIncrement />
      </div>
      <div class='show-back'> {{ backCount }}</div>
      <div class='decrement'>
        <MyDecrease />
      </div>
    </div>

    <el-input v-model='test1' onInput="value=value.replace(/^(0+)|[^\d]+/g,'')" />
    <el-input v-model='test2' @input='deal' />


    <el-tabs v-model='activeName' @tab-click='tabClick'>
      <el-tab-pane v-for = "item in arr" :label='item.label' :name='item.name'>{{item.name}}</el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import MyDecrease from './decrease.vue'
import MyIncrement from './increment.vue'

export default {
  name: 'deal',
  components: {
    MyDecrease,
    MyIncrement
  },
  data() {
    return {
      degValue: 0,
      fontCount: 0,
      backCount: 0,
      test1: undefined,
      test2: undefined,
      activeName: 'name0',
      arr: []
    }
  },
  mounted() {
    this.$EventBus.$on('incremented', ({ num, deg }) => {
      this.fontCount += num
      this.$nextTick(() => {
        this.backCount += num
        this.degValue += deg
      })
    })
    this.$EventBus.$on('decreased', ({ num, deg }) => {
      this.fontCount -= num
      this.$nextTick(() => {
        this.backCount -= num
        this.degValue -= deg
      })
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('decreased', {})
    this.$EventBus.$off('incremented', {})
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.arr = []
      for (let i = 0; i < 5; i++) {
        this.arr.push(
          { label: 'label' + i, name: 'name' + i }
        )
      }
    },
    deal(value) {
      console.log(value)
    },
    tabClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 220px;
  margin: 20px;
}
</style>
